<template>
  <!-- 商品分类第一种布局样式 -->
	<view class='productSort copy-data' >
	
		<view class='header acea-row row-center-wrapper'>
			<view class='acea-row row-between-wrapper input'>
				<text class='iconfont icon-sousuo'></text>
				<input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search'
					name="search" placeholder-class='placeholder'></input>
			</view>
		</view>
		<view class="scroll-box" >
			<view class='aside'>
				<scroll-view scroll-y="true" scroll-with-animation='true' class="height-add" >
					
					
					<view class='item acea-row row-center-wrapper' :class='-1==navActive?"on":""' @click="tapWeinituijian">
						<text>为你推荐</text>
					</view>
					
					
					<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
						v-for="(item,index) in productList" :key="index" @click='tap(index,"b"+index)'>
						<text>{{item.cate_name}}</text>
					</view>
				
				
				
				</scroll-view>
			</view>
			
			<scroll-view scroll-y="true" class="rightGoodBox" v-if="navActive==-1">
				
				
				
				<view class='shupingShowBox' 
					v-for="(item,index) in weinituijianData" :key="index">
				
					<view class="sepLineView"></view>
					<image mode="aspectFit" :src='item.image'  @click="godDetail(item)" class="hengpingimage"></image>
					
					
					<view class="titleshubang">{{item.store_name}}</view>
					
					
					<text class="activeShubangbiaoqian"
						v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</text>
					<text class="activeShubangbiaoqian"
						v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</text>
					<text class="activeShubangbiaoqian"
						v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</text>
					<text class="activeShubangbiaoqian" v-if="item.promotions.title">{{item.promotions.title}}</text>
							
					
							
					<view class="PriceShuban" v-if="isStore==0">￥{{item.price}}</view>
					
					<view class="PriceShuban" v-if="isStore==1">￥{{item.vip_price}}</view>
							
					<image v-if="item.stock>0" @click="addTocar(item)" class="shubanaddcar" src='../../static/images/addcar.png'></image>
					
					<view v-if="item.stock<=0" class="shubanNoStock" >已售罄</view>
					
				
				</view>
				
				
				
				
				
				
			</scroll-view>
			

			<view class='conter' v-if="navActive>-1">
				<scroll-view scroll-y="true" :scroll-into-view="toView" @scroll="scroll" scroll-with-animation='true'
				 class="conterScroll height-add">
					<block v-for="(item,index) in productList" :key="index">
						<view class='listw' :id="'b'+index">
							<view class='title acea-row row-center-wrapper'>
								<view class='line'></view>
								<view class='name'>{{item.cate_name}}</view>
								<view class='line'></view>
							</view>
							<view class='list acea-row'>
								<block v-for="(itemn,indexn) in item.children" :key="indexn">
									<navigator hover-class='none'
										:url='"/pages/goods/goods_list/index?sid="+itemn.id+"&title="+itemn.cate_name'
										class='item acea-row row-column row-middle'>
										<view class='picture'>
											<image :src='itemn.pic' v-if="itemn.pic"></image>   
											<image src="/static/images/sort-img.png" v-else></image>
										</view>
										<view class='name line1'>{{itemn.cate_name}}</view>
									</navigator>
								</block>
							</view>
						</view>
					</block>
					<view :style='"height:"+(height-heightDiv)+"rpx;"'></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getProductslist,
		getCategoryList,
		postCartAdd,
		getMyIntro
	} from '@/api/store.js';
	import {
		mapState,
		mapGetters
	} from "vuex"
	import {
		getUserInfo
	} from '@/api/user.js';
	

	
	
	const app = getApp();
	export default {
		props: {
			isFooter:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				navlist: [],
				productList: [],
				navActive: -1,
				number: "",
				height: 0,
				heightDiv: 0,
				hightArr: [],
				toView: "",
				tabbarH: 0,
				footH: 0,
				windowHeight: 0,
				pageHeight: '100%',
				sysHeight: sysHeight,
				// #ifdef APP-PLUS
				pageHeight: app.globalData.windowHeight,
				// #endif
				footerStatus: false,
				lock: false,
				weinituijianData: [],
				isStore : 0,
			}
		},
		computed: {
			...mapState({
				cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['uid', 'isLogin']),
		},
		
		
		mounted() {
			let that = this
			// this.getAllCategory();
			
			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
			
	
			
		},
		
		
		methods: {
			
			godDetail(item) {
				
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
				
			},
			
			/*
			 * 获取用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
			
					if ( res.data.user_type == 'store' ){
			
						that.isStore = 1;
						
					}else{
						
						that.isStore = 0;
					
					}
					
					
					
					
				});
			},
			
			
			addTocar(item){
				
				
				//是否登录
				if (this.isLogin === false) {
					
					return this.$util.Tips({
						title: '去登录'
					});
					
				} else {
					
					this.addToCarPost(item);
					
				}
				
				
				
				
			},
			
			
			addToCarPost(item){
				
				
				
				var that = this;
				
				
				var cartNum = 1;
				
				console.log(item);
				
				if (this.isStore==1 && item.minimum_store_inventory > 0){
					cartNum = item.minimum_store_inventory;
				}
				
				
				let q = {
					cartNum: cartNum,
					productId:item.id
				};
					
					
				
				postCartAdd(q)
					.then(function(res) {
						
						
						that.$util.Tips({
							title: '添加购物车成功',
							success: () => {
								that.cartNum = res.data.cartNum;
								that.getCartCount(true);
							}
						});
						
						
					})
					.catch(err => {
						that.isOpen = false;
						return that.$util.Tips({
							title: err
						});
					});
				
				
				
				
				
			},
			
			
			
			//查找产品
			get_product_list(){
				
				this.getUserInfo();
				
				// console.log(12334);
				
				var postData = {
					
					page: 1,
					limit : 20
					
				};
				
				
				getMyIntro(postData).then(res => {
					let list = res.data;
					
					this.weinituijianData = list;
					// console.log(list);
					
				}).catch(err => {
				
				});
				
				
				
				
			},
			
			
			footHeight(data) {
				this.footH = data
			},
			tapWeinituijian(){
				this.navActive = -1;
			},
			
			infoScroll: function() {
				let that = this;
				let len = that.productList.length;
				this.number = that.productList[len - 1].children.length;
				let height = 0;
				let hightArr = [];
				//设置商品列表高度
				let query = uni.createSelectorQuery().in(this);
				query.select(".conter").boundingClientRect();
				query.exec(function(res){
					height = res[0].height;
				})
				for (let i = 0; i < len; i++) {
					//获取元素所在位置
					let query = uni.createSelectorQuery().in(this);
					let idView = "#b" + i;
					query.select(idView).boundingClientRect();
					query.exec(function(res) {
						let top = res[0].top;
						that.hightArr.push(top);
						if(len == that.hightArr.length){
							//设置转化比例
							uni.getSystemInfo({
								success: function(res) {
									let per = (750 / res.windowWidth);
									that.height = height * per;
									that.heightDiv = (that.hightArr[that.hightArr.length-1] - that.hightArr[that.hightArr.length-2])*per;
								},
							});
						}
					});
				};
			},
			tap: function(index, id) {
				this.toView = id;
				this.navActive = index;
				this.$set(this, 'lock', true);
			},
			getAllCategory: function() {
				let that = this;
				getCategoryList().then(res => {
					that.productList = res.data;
					that.$nextTick(res => {
						setTimeout(function(){
							that.infoScroll();
						})
					})
				})
				
				this.get_product_list();
				
				
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				if (this.lock) {
					this.$set(this, 'lock', false);
					return;
				}
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
							0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			},
			searchSubmitValue: function(e) {
				if (this.$util.trim(e.detail.value).length > 0)
					uni.navigateTo({
						url: '/pages/goods/goods_list/index?searchValue=' + e.detail.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
		}
	}
</script>
<style>
  .height-add {
    height: 100%;
  }
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	/deep/uni-scroll-view{
		padding-bottom: 0!important;
	}
	.sys-title {
		z-index: 10;
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		text-align: center;
	}
	.sys-head {
		background-color: #fff;
	}
	.productSort {
		display: flex;
		flex-direction: column;
		
		// background-color: red;

		height: calc(100vh) !important;

	}

	.productSort .header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input input {
		font-size: 26rpx;
		height: 100%;
		width: 597rpx;
	}

	.productSort .scroll-box {
		flex: 1;
		overflow: hidden;
		display: flex;
	}

	// #ifndef MP
	// uni-scroll-view {
	// 	padding-bottom: 100rpx;
	// }

	// #endif

	.productSort .aside {
		width: 180rpx;
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f7;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
		text-align: center;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid var(--view-theme);
		width: 100%;
		color: var(--view-theme);
		font-weight: bold;
	}

	.productSort .conter {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 0 14rpx;
		background-color: #fff;
		position: relative;
	}

	.productSort .conter .listw {
		padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 90rpx;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
	}

	.productSort .conter .list .item {
		width: 177rpx;
		margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
	
.rightGoodBox{
	
	position: relative;
	
	display: flex;
	
	flex-direction: column;
	
	
	height: 100%;
	
	width: 570rpx;
	
	// background-color: red;
	
}
	




.shupingShowBox{
	
	
	// background-color: #65bc53 !important;
	position: relative;
	
	width: 100%;
	
	height: 209rpx;
	
	// margin-top: 20rpx;
	
	margin-left: 0rpx !important;
	
	margin-top: 20rpx;
	
	// background-color: red !important;
	
	
}

.hengpingimage{
	
	position: absolute;
	
	top: 26rpx;
	
	left : 26rpx;
	
	width: 197rpx;
	
	height: 164rpx;
	
}


.sepLineView{
	
	
	position: absolute;
	
	bottom: 0rpx;
	
	left : 240rpx;
	
	width: 510rpx;
	
	height: 1rpx;
	
	background-color: #E0E4ED;
	
}


.titleshubang{
	
	position: absolute;
	
	top: 26rpx;
	
	left : 241rpx;
	
	width: 300rpx;
	
	height: 40rpx;
	
	line-height: 40rpx;
	
	font-size: 26rpx;
	
	color: #222222;
	
	overflow : hidden;
	
	// background-color: red;
	
	font-weight: bold;
	
	
}


.activeShubangbiaoqian{
	
	
	position: absolute;
	
	top: 76rpx;
	
	left : 241rpx;
	

	
	height: 32rpx;
	
	font-size: 20rpx;
	
	border: #B88F45 1px solid;
	
	color: #B88F45;
	
	border-radius: 6rpx;
	
	padding-left: 11rpx;
	
	padding-right: 11rpx;
	
	// font-weight: bold;
	
	
	
}


.PriceShuban{
	
	
	position: absolute;
	
	top: 152rpx;
	
	left : 239rpx;
	
	
	
	height: 32rpx;
	
	font-size: 36rpx;

	
	color: #E93D34;
	

	
	font-weight: bold;
	
	
	
	
}

.shubanaddcar{
	
	position: absolute;
	
	bottom: 19rpx;
	
	right : 30rpx;
	
	height: 46rpx;
	
	width: 46rpx;
	
}


.shubanNoStock{
	
	position: absolute;
	
	bottom: 19rpx;
	
	right : 30rpx;
	
	// height: 46rpx;
	
	color: #cccccc;
	
	font-size : 25rpx;
	
	// width: 46rpx;
	
}


.hengpingBox{
	
	position: relative;
	
	display: flex;
	
	flex-direction: row;
	
	flex-wrap: wrap;
	
	
	
	
}


.hengpingLeftBox{
	
	width: 344rpx;
	
	// height : 518rpx;
	
	background-color: white;
	
	border-radius: 20rpx;
	
	position: relative;
	
	margin-top: 24rpx;
	
	margin-left: 24rpx;
	
	display: flex;
	
	flex-direction: column;
	
	// align-items: ;
	
	
}

.shupingimage{
	
	margin-top: 24rpx;

	width: 344rpx;
		
	height: 344rpx;
	
}



.titlehengban{
	
	// position: absolute;
	
	margin-left: 18rpx;
	
	margin-top: 18rpx;
	
	width: 290rpx;
	

	
	font-size: 28rpx;
	
	color: #333333;
	
	font-weight: bold;
	
	// background-color: #65bc53;
	
	
}


.activeNameBox{
	
	position: relative;
	
	margin-top: 23rpx;
	
	margin-left: 21rpx;
	
	
	
	height: 32rpx;
	

	
	
}


.activehengbangbiaoqian{
	
	position: absolute;
	
	left: 0;
	
	top: 0;

	
	height: 32rpx;
	
	font-size: 20rpx;
	
	border: #B88F45 1px solid;
	
	color: #B88F45;
	
	border-radius: 6rpx;
	
	padding-left: 11rpx;
	
	padding-right: 11rpx;
	
	// font-weight: bold;
	
	
	
}




.PriceHengban{
	
	
	// position: absolute;
	
	// top: 152rpx;
	
	// left : 239rpx;
	
	position: relative;
	
	margin-top: 23rpx;
	
	margin-left: 21rpx;
	
	height: 32rpx;
	
	font-size: 36rpx;

	
	color: #E93D34;
	

	
	font-weight: bold;
	
	margin-bottom: 38rpx;
	
	
}


	
</style>
